<template>
  <a-page class="" id="page-bbs">
    <div slot="nav">
      <page-forum-nav></page-forum-nav>
    </div>
    <div class="row justify-center">
      <div v-if="instance" class="col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12" @click="onClick">
        <div class="border-bottom-1 q-pa-md bg-white border-radius-3 q-mb-xl"  :class="{'shadow-light': $q.screen.gt.md}">
          <div class="row q-my-md">
            <div class="size-22 text-grey-9">{{ instance.title }}</div>
          </div>
          <div class="row size-14 text-grey-6 top-person-title">
            <div class="q-mr-md row items-center">
              <a-head :user="instance.user" :size="24"></a-head>
            </div>
            <div class="q-mr-md q-mr-md-right">发表于{{ timesince(instance.add_date) }}</div>
            <div v-if="instance.view_number" class="q-mr-md q-mr-md-right">{{ instance.view_number }} 浏览</div>
          </div>
          <div class="size-18 text-content text-grey-9 q-py-md" v-html="getSanitizeHtml(instance.content)">
          </div>
          <a-comment-boxes type="forum" :id="id" title="回复" :title-hidden="true">
            <a-up class="q-mr-xs" :up="instance.up_number" type="forum" :id="instance.id" :upd="instance.upd"></a-up>
            <a-collect class="q-mr-xs" type="forum" :id="instance.id" :collected="instance.collected"></a-collect>
            <a-share v-if="$q.screen.gt.sm" :title="instance.title"></a-share>
          </a-comment-boxes>
        </div>
      </div>
    </div>
    <a-light-box v-model="lightBoxImage"></a-light-box>
  </a-page>
</template>

<script>
  import PageForumNav from './nav/forum'
  import { sanitizeHtml } from '../utils/string'
  import ALightBox from '../components/lightBox'

  export default {
    name: 'PageForum',
    components: { PageForumNav, ALightBox },
    props: {
      id: {
        type: [Number, String],
        required: true
      }
    },
    data () {
      return {
        instance: null,
        up: false,
        lightBoxImage: null
      }
    },
    created () {
      this.getRequest({ api: '/api/forum/{id}/', id: this.id })
    },
    methods: {
      getSanitizeHtml (html) {
        return sanitizeHtml(html, [ 'img', 'i', 'p', 'blockquote', 'a', 'h2', 'ul', 'ol' ])
      },
      onClick (event) {
        const target = event.target

        if (target.nodeName !== 'IMG') {
          return false
        }

        this.lightBoxImage = target.src
      }
    }
  }
</script>

<style lang="stylus">
  #page-bbs
    .text-content img
      cursor pointer
    .top-person-title
        .q-mr-md-right
          line-height 30px
</style>
